<template>
  <div>
     我是子组件
     <!-- <ul>
      <li>我的名字是 {{SonNames.uname}}</li>
      <li>我的姓是 {{SonNames.famliyName}}</li>
      <li>我的年龄是 {{SonNames.age}}</li>
      <li>我的职业是 {{SonNames.profess}}</li>
    </ul> -->
    <div>我是第{{messageId}}个</div>
      <ul>
      <li>我的名字是 {{messageUname}}</li>
      <li>我的姓是 {{messageFamliyName}}</li>
      <li>我的年龄是 {{messageAge}}</li>
      <li>我的职业是 {{messageProfess}}</li> <button @click="add">增加</button>
    </ul>
   </div>
</template>
 
<script>
export default {
  name: "son",
  // props接收到的数据，和data一样，可以直接在模板或者methods等方法中使用
  props: ['SonNames','messageId','messageUname','messageFamliyName','messageAge','messageProfess'],
  data() {
    return {};
  },
  methods: {
    add() {
         this.$emit('adds', this.messageId)
    }
   }
};
</script>

<style scoped>
     
</style>